<template>
<div>
    <div class="base-template__content">
        <div  class="moon__title">行政区划code表</div>
    </div>
    <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper" style="position: relative;">
            <div  class="new-content-title">Code </div>
            <a-input  allowClear v-model="inputV"  style="position: absolute;top: 0px;right: 0;width: 200px" placeholder="输入code或名称查询" class="codeinputsearch">
                <a-icon slot="addonAfter" type="search" style="cursor: pointer;"/>
            </a-input>
            <div  class="new-content-line"  style="width: 38px;"></div>
        </div>
        <li class="ant-pagination-total-text">共计 {{codes.length}} 个</li>
        <table  class="table-custom">
            <thead >
                <tr >
                    <th >code</th>
                    <th >行政区划</th>
                    <th >时相(年)</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(item ,item_index) in codes"  :key="item_index">
                    <td >{{item.properties.code}}</td>
                    <td >{{item.properties.name}}</td>
                    <td >2018</td>
                </tr>
            </tbody>
        </table>
        <a-back-top />  
    </div>
    
</div>
</template>
<script>
import $ from 'jquery';
  export default {
    data() {
        return {
            codes:[],
            inputV:'',
            ajaxcodes:[],
        }
    },
    mounted() {
       this.initmenuajax();
       $(".codeinputsearch .anticon-search").off("click").click(()=>{
           this.Search();
       })
    },
    methods:{
        Search(){
            if(this.inputV==""){
                this.codes=this.ajaxcodes;
            }
            else{
                this.codes=[];
                this.find(this.inputV);
            }
        },
        ajaxSet(level){
            return {
                type:"get",
                async:true,
                dataType:"json",
                url: window.Glod.wfs,
                data: {
                    service:'WFS',
                    version:'1.1.0',
                    request:'GetFeature',
                    TYPENAME:'xzqh:xzqh',
                    outputFormat:'application/json',
                    SRSNAME:'EPSG:3857',
                    PROPERTYNAME:'name,code',
                    FILTER:`<Filter><PropertyIsEqualTo><PropertyName>level</PropertyName><Literal>${level}</Literal></PropertyIsEqualTo></Filter>`,
                },
            }
        },
        find(value){
            let finds=this.ajaxcodes.filter((element)=>{
                return (element.properties.code.toString().indexOf(value+'') != -1) ||(element.properties.name.indexOf(value) != -1) 
            })
            this.codes=finds;
        },
        sort(a,b){
           return a.properties.code - b.properties.code
        },
        initmenuajax() {
            this.codes=[];
            Promise.all([$.ajax(this.ajaxSet(1)),$.ajax(this.ajaxSet(2)), $.ajax(this.ajaxSet(3)), $.ajax(this.ajaxSet(4))])
                .then((datas) => {
                    let codes_concat=[].concat(datas[0].features).concat(datas[1].features).concat(datas[2].features).concat(datas[3].features) ;
                    let sortcodes= codes_concat.sort(this.sort);
                    let sortcodes2= codes_concat.sort(this.sort);
                    this.codes=sortcodes2;
                    this.ajaxcodes=sortcodes;
                },(error)=>{
                    console.log('initmenuajax error',error);
                })
            },
        },
  }
</script>